<template>
    <div  class="infinite-list"  style="overflow:auto">
        <div v-for="o in 3" :key="o" class="text item infinite-list-item">
            
            <!-- 卡片 -->
            
            <el-card class="box-card" style="margin-right: 1rem; height: auto;"> 
                <table style="width: 100%;" >
                    <tr @click="handlexinwen()" class="s">

                        <!--  -->
                        
                        <td style="padding-right: 1rem; border: solid 1px; width: 13%;">
                            <div class="demo-image" style="text-align: center; ">

                                    <img src="../assets/logo.png" style="pointer-events: none; width: 90px; height: 90px; background-repeat: no-repeat" alt="">

                            </div>
                        </td>
                        <td style="text-align: center; padding-left: 1rem;">

                                <div style="text-align: center; margin-bottom: 0.5rem">
                                    <h1 style="font-size: 32px; font-family: '等线'; text-align: left; padding-bottom: 0.5rem">天下美食</h1>
                                </div>
                                <div style="text-align: left"  class="s1">
                                    <el-input
                                        type="textarea"
                                        :rows="3"
                                        v-model="textarea"
                                        readonly="readonly"
                                        class="input__textarea"
                                        text>
                                    </el-input>
                                </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" >
                            <div style="text-align: right; margin-top: 0.5rem; ;">
                                <span>
                                    <el-badge :value="12" class="item">
                                        <el-button size="small">点赞数量</el-button>
                                    </el-badge>
                                
                                    <el-badge :value="3" class="item">
                                        <el-button size="small">评论数量</el-button>
                                    </el-badge>
                                
                                    <el-badge :value="98" class="item" type="primary">
                                        <el-button size="small">阅读数量</el-button>
                                    </el-badge>
                                
                                    <el-badge :value="value" class="item" type="warning">
                                        <el-button size="small">发布日期</el-button>
                                    </el-badge>
                                </span>
                            </div>
                        </td>
                    </tr>
                </table>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                value:'',
                textarea: 
`    从美食延伸到人文历史记忆，于平淡中见真情，体现一代学者的知识分子情怀。
    著名学者丁帆美食人文笔记。作者从万里江山酒一杯，到长江四鲜谁为最，从五味调鼎者到从咸菜黄豆里吃出胡桃味的人，将味觉记忆与人文情趣注于笔端，在至真至诚的文字中，平常食事散发出逝去的人情之味与旧日时光的温暖。`,
                 fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
            }
        },
        methods:{
            handlexinwen: function(){
                this.$router.push('/article')
            }
        }
    }
</script>

<style scoped>
.demo-image{
    /* background:#fff; */
    display: flex;
    text-align: center;
    align-items: center;
    cursor:unset;
}

.demo-image img{
    clear: both;
    display: block;
    margin: auto;
    width: 90px;
    height: 90px; 
    align-items: center;
}
/* 文本域选择器属性 */
.el-input
{
    border: none;
    float: left ;
}
*{
    margin: 0px;
    padding: 0px;
    /* user-select: none; */
    font-family: '等线'
}

.el-tabs_nav-scroll{
    border: none;
    border-width: 1px;
    /* background-color: aquamarine */
}
/* 新闻推荐卡片效果 */
.s{
    cursor: pointer;
    user-select: none;

}
.s:hover{
    color: #409EFF
}
.s .s1:hover{
    color: #409EFF
}
.el-f1{
    width: 80%;
    float: left
}
.el-f2{
    float: left;
    /* background-color: aliceblue; */
    width: 19%;
    margin-left: 1px
}

  
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .el-button{
      /* border: none; */
      border-width: 0.5rem;
      border-color: white;
      border-style: solid;
  }
  .box-card {

    /* height: 23%; */
    margin-bottom: 1rem
  }
  .item {
        margin-top: 10px;
        margin-right: 40px;
    }
</style>